<template>
	<view class="feed">
		<!-- <Header title="喂神兽"></Header> -->
		<u-navbar :is-back="false" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<view class="nav-bar">
					<u-icon class="back" size="20px"  @click="$p.back()" name="arrow-left"></u-icon>
					<text>喂神兽</text>
				</view>
			</view>
		</u-navbar>

		<view class="main">
			<view class="inner">
				<!-- 透明框 -->
				<view class="tmoutbox">
					<view class="tmbox">
						<view class="dtime">
							<view>
								<image src="http://img.cpgm.cc/panda/static/feed/nz.png" mode="widthFix" />
								<text>{{hours}}:{{minutes}}:{{seconds}}</text>
							</view>
							<text>结束后瓜分最大最小神兽</text>
						</view>
						<view class="toright">
							<view @click="$p.navto('/pages/home/feedprevious')">
								<image src="http://img.cpgm.cc/panda/static/feed/r1.png" mode="widthFix" />
								<text>往期详情</text>
							</view>
							<view @click="$p.navto('/pages/home/feedrule')">
								<image src="http://img.cpgm.cc/panda/static/feed/r2.png" mode="widthFix" />
								<text>玩法</text>
							</view>
							<view @click="$p.navto('/pages/home/arank')">
								<image src="http://img.cpgm.cc/panda/static/feed/r3.png" mode="widthFix" />
								<text>排行榜</text>
							</view>
						</view>
					</view>

					<view class="endbox">
						<view class="tm">
							<view class="t_left">
								<image class="lb_img" :src="'http://img.cpgm.cc/panda/static/feed/'+ keyimg[0] + '.png'" mode="widthFix" />
								<view class="l_b">
										<text class="tl_tit">最大神兽瓜分总奖金</text>
										<text>{{feedinfo.max_pool?feedinfo.max_pool:0}}个</text>
								</view>
							</view>
							<view class="line"></view>
							<view class="t_left">
								<image class="lb_img" :src="'http://img.cpgm.cc/panda/static/feed/'+ keyimg[4] + '.png'" mode="widthFix" />
								<view class="l_b">
										<text class="tl_tit">最小神兽瓜分总奖金</text>
										<text>{{feedinfo.min_pool?feedinfo.min_pool:0}}个</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				
				<!-- 神兽框 -->
				<view class="animals">
					<view class="atop">
						<view @click="feed(keyimg[0])">
							<image :src="'http://img.cpgm.cc/panda/static/feed/'+ keyimg[0] + '.png'" mode="widthFix" />
							<span>{{imgvalue[0]?imgvalue[0]:0}}斤</span>
						</view>
						<view  @click="feed(keyimg[1])">
							<image :src="'http://img.cpgm.cc/panda/static/feed/'+ keyimg[1] + '.png'" mode="widthFix" />
							<span>{{imgvalue[1]?imgvalue[1]:0}}斤</span>
						</view>
					</view>
					<view class="abot">
						<view  @click="feed(keyimg[2])">
							<image :src="'http://img.cpgm.cc/panda/static/feed/'+ keyimg[2] + '.png'" mode="widthFix" />
							<span>{{imgvalue[2]?imgvalue[2]:0}}斤</span>
						</view>
						<view  @click="feed(keyimg[3])">
							<image :src="'http://img.cpgm.cc/panda/static/feed/'+ keyimg[3] + '.png'" mode="widthFix" />
							<span>{{imgvalue[3]?imgvalue[3]:0}}斤</span>
						</view>
						<view  @click="feed(keyimg[4])">
							<image :src="'http://img.cpgm.cc/panda/static/feed/'+ keyimg[4] + '.png'" mode="widthFix" />
							<span>{{imgvalue[4]?imgvalue[4]:0}}斤</span>
						</view>
					</view>
					<!-- <p class="clposa">点击神兽投喂肉</p> -->
				</view>
			</view>
			
			<!-- 神兽列表 -->

			<view class="anlist">
				<view class="baibgbox">
					<view class="a_item">
						<image :src="'http://img.cpgm.cc/panda/static/feed/'+ keyimg[0] + '.png'" mode="widthFix" />
						<span>已喂 <text>{{imgvalue2[0]}}</text>斤</span>
						<view class="i_posa">
							最大
						</view>
					</view>
					<view class="a_item">
						<image :src="'http://img.cpgm.cc/panda/static/feed/'+ keyimg[1] + '.png'" mode="widthFix" />
						<span>已喂 <text>{{imgvalue2[1]}}</text>斤</span>
					</view>

					<view class="a_item">
						<image :src="'http://img.cpgm.cc/panda/static/feed/'+ keyimg[2] + '.png'" mode="widthFix" />
						<span>已喂 <text>{{imgvalue2[2]}}</text>斤</span>
					</view>

					<view class="a_item">
						<image :src="'http://img.cpgm.cc/panda/static/feed/'+ keyimg[3] + '.png'" mode="widthFix" />
						<span>已喂 <text>{{imgvalue2[3]}}</text> 斤</span>
					</view>

					<view class="a_item">
						<image :src="'http://img.cpgm.cc/panda/static/feed/'+ keyimg[4] + '.png'" mode="widthFix" />
						<span>已喂 <text>{{imgvalue2[4]}}</text> 斤</span>
						<view class="i_posa">
							最小
						</view>
					</view>
				</view>

				<view class="boxleft">
					<image src="http://img.cpgm.cc/panda/static/feed/box1.png" mode="widthFix" />
					<view>
						<text>当前每斤瓜分</text>
						<text>{{feedinfo.max_per}}个</text>
					</view>
				</view>

				<view class="boxright">
					<image src="http://img.cpgm.cc/panda/static/feed/box2.png" mode="widthFix" />
					<view>
						<text>当前每斤瓜分</text>
						<text>{{feedinfo.min_per}}个</text>
					</view>
				</view>
			</view>

			<!-- 本期 -->
			<view class="benqi">
				<p>我本期已喂 <text>{{feedinfo.user_feed}}斤</text> </p>
				<p>可瓜分水晶 <text>{{feedinfo.user_reward}}个</text></p>
			</view>

			<view class="borbox">
				<view class="leftop">
					<h3>喂投肉</h3>
					<text>(剩余{{feedinfo.user_residue}}斤)</text>
				</view>
				<!-- 增加减少部分 -->
				<view class="numbox">
					<view class="jian" @click="$p.navto('/pages/home/alog')">
						<text>记录</text>
					</view>
					<!-- <view class="add" @click="show3 = true">
						<text>买肉</text>
					</view> -->
					<view class="center">
						<image class="meat" src="http://img.cpgm.cc/panda/static/feed/meat.png" mode="widthFix" />
						<view class="flaic">
							<image @click="jian()" src="http://img.cpgm.cc/panda/static/feed/jian.png" mode="widthFix" />
							<view class="inp">
								喂  <input v-model="meat" maxlength="3" @input="inputchange(meat)" type="number">  斤
							</view>
							<image @click="jia()" src="http://img.cpgm.cc/panda/static/feed/jia.png"  mode="widthFix" />
						</view>
						<view class="addbtn button"  @click="show3 = true">买肉</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 是否投喂 -->
		<u-mask :show="show">
			<view class="warp">
					<view class="maskbox">
						<view class="m_title">
							<text>投喂</text>
						</view>
						<view class="whitebg">
							<h3>是否投喂<text>{{meat}}</text>斤肉</h3>
							<view class="maskbtn">
								<view class="button btn1" @click="show = false">取消</view>
								<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button btn2" @click="feedbox()">确定</u-button>
							</view>
						</view>
					</view>
			</view>
		</u-mask>

		<u-mask :show="show2">
			<view class="warp">
				<!-- <image src="" mode="" /> -->
				<view class="maskbox mbg2">
					<img class="masktit" src="http://img.cpgm.cc/panda/static/feed/masktit.png" alt="">
					<view class="m_title m_title2">
						<text>恭喜您</text>
					</view>
					<view class="whitebg">
						<p>成功瓜分<text>{{feedinfo.last_user_reward}}</text>水晶</p>
						<image src="http://img.cpgm.cc/panda/static/index/3.png" mode="widthFix" />
						<view class="maskbtn">
							<view class="button btn3" @click="closeshow2">开心收下</view>
						</view>
					</view>
				</view>
			</view>
		</u-mask>

		<!-- 买肉 -->
		<!-- <u-mask :show="show3">
			<view class="warp">
				<view class="maskbox">
					<view class="imgtit">
						<view class="in">
							<image src="http://img.hfqx.xyz/static/feed/meat.png" mode="widthFix" />
						</view>
					</view>
					<h3>购买多少斤肉</h3>
					<view class="adj">
						<view class="num">
							<Number v-model="value"  :input-width="160" color="#DC585F" ></Number>
							<p>购买需要花费 <text>{{value}}个</text> 水晶</p>
						</view>
					</view>
					<view class="maskbtn">
						<view class="button btn3" @click="buymeat()">确定</view>
					</view>
					<p>当前拥有 <text>{{userinfo.crystal}}个</text> 水晶</p>
				</view>
				<image class="close" @click="closeshow3()" src="http://img.hfqx.xyz/static/public/cha.png" mode="widthFix" />
			</view>
		</u-mask> -->

		<u-popup v-model="show3" mode="bottom" border-radius="30">
			<view class="popbox"> 
				<image class="closed" @click="show3=false" src="http://img.cpgm.cc/panda/static/feed/cha.png" mode="widthFix" />
				<image class="p_meat" src="http://img.cpgm.cc/panda/static/feed/meat.png" mode="widthFix" />
				<view class="whitebg2">
					<view class="poptit">购买多少斤肉？</view>
					<view class="numbox">
						<Number v-model="value" size="25px"  :input-width="160" color="#131314" ></Number>
					</view>
					<view class="haveto">
						<text>购买需要花费</text>
						<text>{{value}}水晶</text>
					</view>
					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button" @click="buymeat()">购买</u-button >
					<view class="haveto mart10">
						<text>当前拥有</text>
						<text>{{userinfo.crystal}}水晶</text>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
import config from '@/common/config/index'
var js , upjs
	export default {
		data() {
			return {
				imgurl:config.imgurl,
				show:false,
				show2:false,
				show3:false,
				checked: false,
				userinfo:'',
				value:1,
				feedinfo:'',
				imgvalue:[0,0,0,0,0],
				imgvalue2:[0,0,0,0,0],
				keyimg:[1,2,3,4,5],
				meat:1,//肉
				isshow:uni.getStorageSync('isshow'),
				isshow2:false,
				nowtime:new Date().getDate(),//当前时间,
				endTime: null, // 结束时间
				hours: 0,
				minutes: 0,
				seconds: 0,
				background:{
					backgroundColor: 'transparent',
				}
			};
		},
		onLoad(){
			this.getUserInfo()
			upjs = setInterval(() => {
					this.feedInfos()
				}, 30000);
				var now = new Date().getTime();
				var show2data = uni.getStorageSync('show2');
				if (show2data && show2data.expireTime > now) {
					this.isshow2 = uni.getStorageSync('show2');
					this.feedInfos();
				// 未过期，可以使用data.value
				} else {
					// 已过期，删除本地存储
					uni.removeStorageSync('show2');
					this.feedInfos();
				}
		},
		mounted() {
			// 倒计时
			this.setEndTime();
			js = setInterval(() => {
					this.countdown();
				}, 1000);
		},
		onUnload(){
			clearInterval(js)
			clearInterval(upjs)
		},
		
		methods: {

			inputchange(event){
				var value = event;
				if (!value || value == " ") {
					return "";
				}
				const rule11 = /[^\w_]/g
				this.$nextTick(()=>{
					this.meat = value.replace(rule11,"")
				})
			},

			setEndTime() {
				const now = new Date();
				const end = new Date(now.getFullYear(),now.getMonth(),now.getDate(),21,0,0);
				if (now.getTime() > end.getTime()) {
					end.setDate(end.getDate() + 1);
				}
				this.endTime = end.getTime();
			},

			countdown() {
				const now = new Date().getTime();
				const diff = this.endTime - now;
				if (diff <= 0) {
					this.hours = 0;
					this.minutes = 0;
					this.seconds = 0;
					this.setEndTime();
					return;
				}
				this.hours = Math.floor(diff / (60 * 60 * 1000));
				if (/^\d$/.test(this.hours)) {
					this.hours = '0' + this.hours;
				}
				this.minutes = Math.floor((diff % (60 * 60 * 1000)) / (60 * 1000));
				if (/^\d$/.test(this.minutes)) {
					this.minutes = '0' + this.minutes;
				}
				this.seconds = Math.floor((diff % (60 * 1000)) / 1000);
				if (/^\d$/.test(this.seconds)) {
					this.seconds = '0' + this.seconds;
				}
			},

			// 请求用户信息接口
			async getUserInfo(){
				let res = await this.$http.index.getUserInfo()
				this.userinfo = res.data
			},
			// 喂神兽信息
			async feedInfos(){
				let res = await this.$http.index.feedInfos();
				this.feedinfo = res.data
				this.keyimg = res.data.sort.id
				this.imgvalue = res.data.sort.num
				this.imgvalue2 = res.data.sort.user_num
				if( res.data.last_user_reward !== '' && res.data.last_user_reward !== 0) {
					if(this.isshow2 == false) {
						this.show2 = true
					}
				}
			},
			
			// 瓜分弹窗显示
			closeshow2(){
				var now = new Date();
				// 计算明天八点半的时间戳
				var ba = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 21, 0, 0);
				var baTimestamp = ba.getTime();
				var nowTimestamp = new Date().getTime();

				uni.setStorageSync('show2', {value: true,expireTime: baTimestamp});
				this.isshow2 = true
				this.show2 = false
			},
			// 减
			jian(){
				if(this.meat > 1) {
					this.meat--
				}
			},
			// 加
			jia(){
				if(this.meat>= this.feedinfo.user_residue) {
					this.$u.toast('剩余数量不足')
				}else {
					this.meat++
				}
			},

			// 喂养
			async feed(id){
				this.animal_id = id
				// 判断肉是否足够
				if( Number(this.feedinfo.user_residue) < Number(this.meat) ) {
					this.show3 = true
					this.value = Number(this.meat) - Number(this.feedinfo.user_residue)
				}else {
					if(this.isshow == this.nowtime) {
						this.feedmeat(this.animal_id)
					}else {
						this.show = true
					}
				}
			},
			// 关闭买肉弹窗
			closeshow3(){
				this.show3 = false
				this.value = 1
			},
			// 是否喂养弹窗
			feedbox(){
				if(!!this.checked) {
					uni.setStorageSync('isshow', this.nowtime);
					this.isshow = this.nowtime
					this.feedmeat(this.animal_id)
				}else {
					this.feedmeat(this.animal_id)
				}
			},

			// 喂养肉接口
			async feedmeat(id){
				let res = await this.$http.index.feed({
					animal_id:id,
					num:this.meat
				})
				this.$u.toast(res.msg);
				if(res.code == 1) {
					this.show = false
					this.feedInfos();
				}
			},

			choose(index){},

			// 购买肉
			async buymeat(){
				let res = await this.$http.index.buymeat({
					num:this.value
				})
				this.$u.toast(res.msg)
				if(res.code == 1) {
					this.show3 = false
					this.getUserInfo()
					this.feedInfos()
				}
			},
		},
	}
</script>

<style lang="less">

	.feed {
		min-height: 100vh;
		background: url('http://img.cpgm.cc/panda/static/home/bg3.jpg');
		background-size: 100% 100%;
	}

	.nav-bar {
		background: url('http://img.cpgm.cc/panda/static/home/bg3.jpg');
		background-size: 100% auto;
	}

	.nav {
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20px;
		text {
			color: #fff;
			font-size: 14px;
		}
	}

	.tmoutbox {
		background: rgba(255,255,255,0.8);
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
		border-radius: 5px;
		padding: 10px;
	}

	.posanav {
		position: absolute;
		width: 25px;
		top: 50%;
		left: 20px;
		transform: translateY(-50%);
	}

	.navtit {
		width: 20%;
		color: #fff;
		font-size: 14px;
	}

	.main {
		padding: 10px 0 0 0;
	}


	.inner {
		padding: 10px;
	}



	// <!-- 顶部部分 -->
	.topbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.left {
		display: flex;
		align-items: center;

		text {
			color: #fff !important;
			font-size: 16px !important;
		}
	}

	.t_item image {
		width: 30px;
		margin-right: 10px;
	}
	.t_item text {
		color: #C4C4C4;
		font-size: 12px;
	}

	.right {
		display: flex;
		align-items: center;

		image {
			width: 50px;
			margin: 0 5px;
		}
	}

	.dtime {
		background: rgba(255,255,255,0.17);
		border-radius: 5px;
		padding: 10px;

		image {
			width: 20px;
			margin-right: 10px;
		}
		text {
			color: #696969;
			font-size: 12px;
		}
		view {
			display: flex;
			align-items: center;
			text {
				color: #343434;
				font-size: 13px;
			}
		}
	} 

	.toright {
		display: flex;
		align-items: center;

		image {
			width: 35px;
		}
		view {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 4px;

			text {
				color: #000;
				font-size: 12px;
				zoom: 0.9;
			}
		}
	}

	.endbox {
		background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 52%, rgba(255,255,255,0) 100%);
		margin-top: 10px;
		padding: 10px 0 0 ;
		border-top: 1px solid rgba(0,0,0,0.1);
	}

	.line {
		width: 1px;
		height: 30px;
		background: rgba(0,0,0,0.1);
	}

// <!-- 透明框 -->
	.tmbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.tm {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.t_left {
		width: 47%;
		display: flex;
		align-items: center;
	}
	.tl_tit {
		color: #131314;
		font-size: 12px;
	}
	.l_b {
		display: flex;
		flex-direction: column;
	}
	.lb_img {
		width: 40px;
		margin-right: 5px;
	}

	.yb {
		width: 30px;
	}
	.sj {
		display: flex;
		align-items: center;

		text {
			color: #239D4C;
			font-size: 13px;
			font-weight: 600;
			white-space: nowrap;
		}
	}


	// <!-- 神兽框 -->
	.atop {
		display: flex;
		align-items: center;
		justify-content: space-between;

		view:nth-child(1) {
			width: 50%;	
			position: relative;

			image{
				width: 100%;
			}
			span {
				position: absolute;
				bottom: 0%;
				left: 50%;
				height: 18px;
				min-width: 50px;
				background: rgba(0,0,0,0.4);
				border-radius: 9px;
				font-size: 12px;
				color: #fff;
				transform: translate(-50% , -50%);
				text-align: center;
				line-height: 18px;
				padding: 1px 6px;
			}
		}

		view:nth-child(2) {
			width: 45%;	
			position: relative;

			image{
				width: 100%;
			}
			span {
				position: absolute;
				bottom: 0%;
				left: 50%;
				height: 18px;
				min-width: 50px;
				background: rgba(0,0,0,0.4);
				border-radius: 9px;
				font-size: 12px;
				color: #fff;
				transform: translate(-50% , -50%);
				text-align: center;
				line-height: 18px;
				padding: 1px 6px;
			}
		}
	}

	.abot {
		display: flex;
		align-items: center;
		justify-content: space-between;

		view {
			position: relative;
			
			image{
				width: 100%;
				
			}
			span {
				position: absolute;
				bottom: 0%;
				left: 50%;
				height: 18px;
				min-width: 50px;
				background: rgba(0,0,0,0.4);
				border-radius: 9px;
				font-size: 12px;
				color: #fff;
				transform: translate(-50% , -50%);
				text-align: center;
				line-height: 18px;
				padding: 1px 6px;
			}
		}
		view:nth-child(1) {
			width: 40%;	
		}
		view:nth-child(2) {
			width: 35%;	
		}
		view:nth-child(3) {
			width: 25%;	
		}
	}


	// <!-- 神兽列表 -->


	.anlist {
		padding: 45px 0px 0px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}

	.baibgbox{
		width: 100%;
		background: rgba(255,255,255,0.6);
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
		padding: 10px;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		margin: 5px 10px 0;
	}


	.a_item {
		width: 20%;
		display: flex;
		align-items: center;
		flex-direction: column;
		position: relative;

		image {
			width: 90%;
		}
		span {
			color: #000000;
			font-size: 12px;
		}
	}
	.i_posa {
		position: absolute;
		top: 10%;
		right: 0;
		width: 29px;
		text-align: center;
		height: 14px;
		background: rgba(0,0,0,0.4);
		border-radius: 20px;
		font-size: 12px;
		line-height: 14px;
		text-align: center;
		color: #fff;
		zoom: 0.9;
	}

	.boxleft {
		position: absolute;
		width: 46%;
		top: 5px;
		left: 10px;

		image {
			width: 100%;
		}

		view {
			display: flex;
			align-items: center;
			position: absolute;
			top: 50%;
			left: 10px;
			transform: translateY(-100%);

			image {
				width: 15px;
			}
			text {
				font-size: 12px;
				zoom: .9;
				white-space: nowrap;
			}
		}
	}
	.boxright {
		position: absolute;
		width: 46%;
		top: 5px;
		right: 10px;

		image {
			width: 100%;
		}
		view {
			display: flex;
			align-items: center;
			position: absolute;
			top: 50%;
			left: 10px;
			transform: translateY(-100%);

			image {
				width: 15px;
			}
			text {
				font-size: 12px;
				zoom: .9;
				white-space: nowrap;
			}
		}
	}



.borbox {
	position: relative;
	background: #FFFFFF;
	border-radius: 10px;
	margin-top: 5px;
	padding: 10px;
}
// 本期

.leftop {
	display: flex;
	align-items: center;

	h3 {
		color: #000;
		font-size: 14px;
	}
	text {
		color: #696969;
		font-size: 12px;
	}
}

.benqi {
	height: 36px;
	background: rgba(255,255,255,0.9);
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
	border-radius: 4px;
	padding: 10px;
	margin: 10px;
	

	display: flex;
	align-items: center;
	justify-content: space-between;

	p {
		color: #696969;
		font-size: 12px;

		text {
			color: #000000;
			font-size: 14px;
			font-weight: 600;
		}
	}
}

	.numbox {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		margin-top: 10px;
		background: rgba(255,255,255,0.3);
		border-radius: 20px;
	}
	.flaic {
		display: flex;
		align-items: center;
		image {
			width: 20px;
			filter: grayscale(1);
		}
	}

	.jian {
		position: absolute;
		top: 0;
		right: 10%;
		width: 25px;
		padding: 10px 2px;
		background: #BCF0E5;
		writing-mode: vertical-lr;
		font-size: 12px;
		color: #696969;
		border-radius: 0px 0px 11px 11px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.add {
		position: absolute;
		top: 0%;
		right: 10%;
		width: 25px;
		padding: 10px 2px;
		font-size: 12px;
		color: #696969;
		background: #BCF0E5;
		border-radius: 0px 0px 11px 11px;
		display: flex;
		align-items: center;
		justify-content: center;
		writing-mode: vertical-lr;
	}

	.center {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #F1F1F1;
		border-radius: 7px;
		margin-top: 10px;
		padding: 10px;

		.meat {
			width: 50px;
			margin-right: 5px;
		}
	}

	.mart15 {
		margin-top: 15px;
	}

	.inp {
		width: 100px;
		height: 26px;
		border-radius: 13px;
		text-align: center;
		line-height: 26px;
		font-size: 14px;
		display: flex;
		align-items: center;
		padding: 0 10px;
		margin: 0 15px;

		text {
			color: #DC585F;
		}

		input {
			flex: 1;
			color: #000000;
			font-size: 14px;
			font-weight: 600;
		}
	}

	.addbtn {
		width: 72px;
		height: 33px;
		background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
		border-radius: 5px;
		color: #fff;
	}

	.bottext {
		color: #696969;
		font-size: 12px;
		margin-top: 5px;
	}



	// 弹窗
	.maskbox {
		background: #fff;
		border-radius: 18px;
		padding: 15px 10px;
		p {
			text-align: center;
			margin-top: 10px;
			text {
				color: #239D4C;
				font-weight: 600;
			}
		}

		.m_meat {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		image {
			width: 80px;
		}
	}

	.imgtit {
		width: 65px;
		height: 65px;
		background: #FFFFFF;
		border-radius: 50%;
		padding: 2px;
		position: relative;
		top: -30px;
		margin: 0 auto;
	}
	.in {
		background: linear-gradient(180deg, #FE9F0D 0%, #FED90D 100%);
		width: 100%;
		height: 100%;
		border-radius: 50%;

		image {
			width: 100%;
			border-radius: 50%;
		}
	}

	.mbg2 {
		padding-top: 30px;
		background: linear-gradient(180deg, #C7DDDA 0%, #FFFFFF 100%);
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
		border-radius: 18px;
	}

	.masktit {
		position: relative;
		left: 5%;
		width: 90%;
		margin: 0 auto;
		margin-top: -50%;
	}

	.m_title2 {
		text {
			font-size: 25px !important;
			color: #000000 !important;
		}
	}

	.maskbtn {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
	}
	.btn1 {
		width: 45%;
		height: 50px;
		background: #EAEAEA;
		border-radius: 5px;
		opacity: 0.7;
		margin: 0 10px;
		color: #000000;
		font-size: 14px;
		font-weight: 600;
	}

	.btn2 {
		width: 45%;
		height: 50px;
		border-radius: 5px;
		margin: 0 10px;
		background:linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
		border-radius: 5px;
		color: #fff;
		font-weight: 600;
	}

	.btn3 {
		width: 90%;
		height: 50px;
		margin: 0 10px;
		background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
		border-radius: 5px;
		color: #fff;
		font-weight: 600;
	}

	.no {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 10px;
	}

	.explain {
		font-size: 12px;
	}

	.close {
		width: 30px;
		position: absolute;
		bottom: -20%;
		left: calc(50% - 15px);
	}


	.num {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20px;
	}
	.animals {
		position: relative;
		min-height: 300px;
		padding:  10px;
	}

	.clposa {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50% , -50%);
		color: #fff;
		font-size: 12px;
	}

	.t1 {
		position: absolute;
		width: 40px;
		left: 0px;
		top: 0;
		z-index: 99;
	}
	.t2 {
		position: absolute;
		width: 40px;
		right: 0px;
		top: 0;
		z-index: 99;
	}
	.t3 {
		position: absolute;
		width: 40px;
		right: 0px;
		top: 50px;
		z-index: 99;
	}


.m_out {
	background: rgba(255,255,255,0.22);
	border-radius: 18px;
	padding: 8px;
}




	.popbox {
		position: relative;
		background: linear-gradient(180deg, #C7DDDA 0%, #FFFFFF 100%);
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40px 15px 15px;
		border-radius: 18px 18px 0px 0px;

		.button {
			height: 50px;
			width: 60%;
			background: linear-gradient(90deg, #E5BB94 0%, #EEDDCF 100%);
			border-radius: 27px;
			color: #000000;
			font-size: 16px;
			font-weight: 600;
			margin-top: 20px;
		}
	}

	.p_meat {
		width: 70px;
	}

	.poptit {
		color: #343434;
		font-size: 20px;
		font-weight: 600;
	}


::v-deep .u-drawer-content {
	overflow: initial !important;
}


	.haveto {
		display: flex;
		align-items: center;
		margin-top: 10px;

		image {
			width: 25px;
		}
		text {
			font-size: 12px;
			color: #696969;
		}

		text:nth-child(3) {
			color: #239D4C;
		}
	}

	.closed {
		width: 25px;
		position: absolute;
		top: 15px;
		right: 15px;
	}

	.mart10 {
		margin-top: 10px;
	}

	.green {
		color: #239D4C !important;
	}

	.m_title {
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			position: relative;
			color: #131314;
			font-size: 16px;
			margin: 0 10px;
			font-weight: 600;
			z-index: 99;
		}
	}

	.whitebg {
		padding: 20px;
		border-radius: 9px;
		margin-top: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 80px;
		}
		p {
			color: #696969;
			font-size: 14px;

			text {
				color: #000000;
			}
		}
	}

	.whitebg2 {
		width: 100%;
		border-radius: 9px;
		margin-top: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
